<template>
<draggable
    class="components-draggable"
    :list="item.list"
    :group="{ name: groupName, pull: 'clone', put: false }"
    :clone="clone"
    draggable=".components-item"
    :sort="false"
    :move="move"
    @end="$emit('end',$event)"
    >
    <div
        v-for="(element, index) in item.list"
        :key="index"
        class="components-item"
        @click="$emit('click',element)"
    >
        <div class="components-body">
        <div>
            <svg-icon :icon-class="element.__config__.tagIcon" />
            <span>{{ element.__config__.label }}{{ element.__config__.labelTip ? `(${element.__config__.labelTip})`:'' }}</span>
        </div>
        </div>
    </div>
</draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
    props: {
        item: Object,
        clone:Function,
        groupName: {
            type: String,
            default: 'componentsGroup'
        },
        move: Function
    },
    components: {
        draggable
    },
};
</script>

<style lang="scss" scoped>
</style>